<template>
  <div class="goodsAttr">
    <Curtain v-model="showContent" :catch-move="true"/>
    <div class="attr-box" v-if="showContent">
        
        
        <div class="content bg-white flex-col">
            <div class="hongbao">
          <get-coupon @get-coupon-success="onGetCouponSuccess" @onUseImmediately="onUseImmediately"
     @get-coupon-fail="onGetCouponFail()" @close="onClose()" :params="params" :zIndex="4"
     :dialogBtnType="dialogBtnType" extraData="111">
     <div class="item flex-col picText">
      <img src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/my/guanyupingtai.png" alt="" class="icon pic" mode="aspectFit">
      <span class="text text-num">领取优惠券</span>
      <span class="icon-num" @click="handledel()">x</span>
     </div>
    </get-coupon>
            
        </div>
            <div class="btns submit-btn" @tap="goOrderInfo">
          确认
        </div>
        </div>

    </div>


    <!-- <SafeServe v-model="showSafe"/> -->
  </div>
</template>
<script>
  // import SafeServe from './safeServe'
  export default {
    // components: { SafeServe },
    model: {
      prop: 'showContent',
      event: 'changeShow'
    },
    props: {
      showContent: Boolean,
      params: {
        type: Array,
        default: () => {}
      }
    },
    computed: {
      
    },
    watch: {
      showContent(value) {
        if (!value) {
          this.$emit('changeShow', value)
        }
      }
    },
    data() {
      return {
        showContent: true,
        showSafe: false,
        currentSpec: 0,
        currentDay: 0,
        days: [1, 3, 7, 30, 60, 90, 180, 360, 720, 1080],
        num: 1, // 数量
        diyDate: '',
        selectServices: [],
        senderMerchantId: "2021002110607982",
      dialogBtnType: 1,
      dialogBtnStyle: {
        color: "#000",
        borderColor: "yellowgreen",
        backgroundColor: "yellowgreen"
      }
      }
    },
    methods: {
      onGetCouponSuccess(resultList, { extraData }) {
      console.log("触发了 onGetCouponSuccess 事件");
      console.log("成功返回结果: ", resultList);
    },
    onGetCouponFail(result, { extraData }) {
      console.log("触发了 onGetCouponFail 事件");
      console.log("失败返回结果: ", result);
    },
    onUseImmediately(event, { extraData }) {
      console.log("触发了 onUseImmediately 事件");

      // 可以跳转到自定义的页面
      my.navigateTo({
        url: "/pages/goods-detail/index"
      });
    },
    onClose(event, { extraData }) {
      console.log("触发了 onClose 事件");
    },
      showService() {
        const [info] = this.goodsInfo.addServiceDTOList
        this.$taro.showModal({
          title: info.addServiceName,
          content: info.addServiceContext,
          showCancel: false
        })
      },
      chooseService(data) {
        if (this.selectServices.find(item => item.id === data.id)) {
          this.selectServices = this.selectServices.filter(item => item.id !== data.id)
        } else {
          this.selectServices.push(data)
        }
      },
      goOrderInfo() {
        const data = {
          goodsInfo: this.goodsInfo,
          num: this.num,
          goodsId: this.goodsInfo.id,
          // addServiceNums: 1,
          addServiceIds: this.selectServiceIds.toString(),
          addServices: this.selectServices,
          specId: this.specItem.id,
          rentDay: this.currentDay >= 0 ? this.rentDays[this.currentDay].day : this.diyDate
        }
        this.$store.dispatch('order/setOrderInfo', {
          id: this.goodsInfo.id,
          data
        })
        this.$goPage(`/pages/comfirmOrder/index?id=${this.goodsInfo.id}`, true)
      },
      changeSpec(index) {
        this.currentSpec = index
        this.currentDay = 0
      }
    }
  }
</script>
<style lang="scss">
  .goodsAttr {
    .attr-box {
      height: 100vh;
      position: fixed;
      width: 100vw;
      left: 0;
      top: 0;
      z-index: 1001;
      position: relative;
      
      > .content {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        border-radius: 10px 10px 0 0;
        padding: 9px 15px 50px;
        min-height: 250px;
        max-height: 250px;
        overflow-y: scroll;
        overflow-x: hidden;
        z-index: 1000;
        .hongbao{
        position: fixed;
        width: 90vw;
        height: 100px;
        background-color: rgb(233, 111, 111);
        bottom: 100px;
        left: 10px;
        z-index: 10000000;
        border-radius: 6px;
        .pic{
      width: 30px;
      height: 30px;
      padding-left: 50px;
    }
    .text-num{
      font-size: 10px;
      color: #8666f7;
    }
    .picText{
      padding-left: 5px;
    }
      }                         
        .baseinfo {
          width: 100%;
          .img {
            width: 97px;
            height: 97px;
            .pic {
              width: 97px;
              height: 97px;
            }
          }
          .base-attr {
            margin-left: 13px;
            .price-info {
              .new-price {
                font-size: 18px;
                line-height: 29px;
                color: #ff5426;
                // .big {
                //   font-size: 21px;
                // }
              }
              .total {
                margin-left: 12px;
                font-size: 14px;
                color: #999999;
              }
            }
            .text {
              font-size: 14px;
              color: #999999;
              line-height: 20px;
            }
          }
        }
        .label-name {
          font-size: 16px;
          font-weight: bold;
          color: #000000;
          .icon-s {
            width: 14px;
            height: 14px;
          }
          .all-count {
            color: #AAAAAA;
            font-size: 12px;
            margin-left: 11px;
          }
        }
        .select {
          margin-top: 16px;
          .list {
            flex-wrap: wrap;
            .item {
              height: 30px;
              border: 1px solid #707070;
              border-radius: 15px;
              padding: 0 12px;
              text-align: center;
              line-height: 32px;
              margin-top: 4px;
              min-width: 50px;
              color: #555;
              margin-right: 4px;
              font-size: 14px;
              background-color: #F5F5F5;
              &.selectItem {
                color: #0096FF;
                background-color: #EEF8FF;
                border: 1px solid #0096FF;
              }
            }
          }
        }
        .lease-date {
          margin-top: 15px;
          .list {
            margin-top: 9px;
            width: 100%;
            flex-wrap: wrap;
            .item {
              min-width: 58px;
              width: 58px;
              height: 30px;
              line-height: 32px;
              text-align: center;
              margin-right: 8px;
              border-radius: 15px;
              background-color: #F5F5F5;
              margin-bottom: 10px;
              box-sizing: border-box;
              &.selectItem {
                background-color: #EEF8FF;
                border: 1px solid #0096FF;
                color: #0096FF;
              }
              .input {
                max-width: 58px;
                height: 30px;
                line-height: 32px;
                text-align: center;
              }
              // &.input {
              //   border: 0!important;
              //   &.selectItem {
              //     box-shadow: 0 0 2px #0096FF;
              //   }
              // }
            }
          }
        }
        .lease-num {
          margin-top: 18px;
          .num-input-box {
            margin-left: auto;
            border: 1px solid #707070;
            .input {
              height: 22.5px;
              min-width: 36px;
              width: 36px;
              padding: 0 5px;
              font-size: 15px;
              font-weight: bold;
              color: #000000;
              line-height: 19px;
              text-align: center;
              box-sizing: border-box;
              // border-top: 1px solid #707070;
              // border-bottom: 1px solid #707070;
            }
            .text {
              height: 22.5px;
              width: 22.5px;
              // border: 1px solid #707070;
              // box-shadow: 0 0 1px #707070;
              line-height: 24.5px;
              text-align: center;
              font-size: 14px;
              color: #222;
              &:first-child {
                border-right: 1px solid #707070;
              }
              &:last-child {
                border-left: 1px solid #707070;
              }
            }
          }
        }
        .safe-serve {
          margin-top: 17px;
          .list {
            margin-top: 9px;
            .item {
              margin-bottom: 5px;
              height: 30px;
              line-height: 32px;
              text-align: center;
              background-color: #fff;
              border-radius: 15px;
              background-color: #F5F5F5;
              font-size: 14px;
              padding: 0 10px;
              margin-right: 10px;
              &.selectItem {
                background-color: #0097FF;
                border: 1px solid #0097FF;
                color: #fff;
              }
              &.last-child {
                margin-right: 0;
              }
            }
          }
        }
        .btns {
          position: fixed;
          bottom: 9px;
          left: 15px;
        }
      }
    }
  }

</style>
